<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <script th:src="@{/js/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/slide.js}"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f8fa;
            color: #333;
        }

        .header_con {
            background-color: #1a1a1a;
            color: #fff;
            padding: 12px 0;
        }

        .header {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .welcome {
            font-size: 14px;
        }

        .header .fr {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header .fr a {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        .search_bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
            max-width: 1200px;
            margin: 0 auto;
        }

        .search_bar .logo img {
            height: 50px;
        }

        .sub_page_name {
            font-size: 18px;
            color: #444;
            font-weight: bold;
        }

        .search_con {
            display: flex;
            gap: 10px;
        }

        .search_con input[type="text"] {
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 180px;
        }

        .search_con input[type="button"] {
            padding: 6px 16px;
            background-color: #4fc3a1;
            border: none;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .box {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 15px;
        }

        h2 {
            text-align: center;
            font-size: 26px;
            margin-bottom: 20px;
            color: #333;
        }

        .table-wrapper {
            overflow-x: auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead {
            background-color: #4fc3a1;
            color: #fff;
        }

        th, td {
            padding: 14px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        @media screen and (max-width: 768px) {
            .search_bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                padding: 15px;
            }

            .search_con {
                width: 100%;
                justify-content: flex-end;
            }

            .search_con input[type="text"] {
                flex: 1;
            }

            .table-wrapper {
                overflow-x: scroll;
            }
        }
    </style>
</head>

<body>

<!-- Header -->
<div class="header_con">
    <div class="header">
        <div class="fr">
            <div class="login_btn" th:if="${session.uaccount} ne null">
                <a href="#">欢迎您：<em th:text="${session.uaccount}"></em></a>
                <span>|</span>
                <a href="http://localhost:8896/goods/quit">退出</a>
            </div>
            <div class="login_btn" th:if="${session.uaccount} eq null">
                <a href="http://localhost:8893/admin/tologin">请您登录</a>
            </div>
            <div class="user_link">
                <span>|</span>
                <a href="/goods/cartAll">我的购物车</a>
                <span>|</span>
                <a href="/goods/getAllorder">我的订单</a>
            </div>
        </div>
    </div>
</div>

<!-- Search Bar -->
<div class="search_bar">
    <a th:href="@{'getAll?uaccount='+${session.uaccount}}" class="logo">
    </a>
    <div class="sub_page_name">|&nbsp;&nbsp;我的订单</div>
    <div class="search_con">
        <input type="text" placeholder="搜索商品">
        <input type="button" value="搜索">
    </div>
</div>

<!-- Order Table -->
<div class="box">
    <h2>我的订单</h2>
    <div class="table-wrapper">
        <table>
            <thead>
            <tr>
                <th>订单号</th>
                <th>商品名称</th>
                <th>购买数量</th>
                <th>总价</th>
                <th>购买时间</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="order:${order}">
                <td th:text="${order.id}">12345</td>
                <td th:text="${order.goodsname}">商品名称</td>
                <td th:text="${order.number}">1</td>
                <td th:text="${order.price}">100.00</td>
                <td th:text="${order.time}">2025-04-24</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>
